<template>
  <div>
    <div ref="divRef" :style="{ width: width, height: height }"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
let hyChart = null
export default {
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    options: {
      type: Object,
      default: () => ({})
    }
  },
  watch: {
    options: {
      deep: true,
      handler(newOptions) {
        hyChart?.setOption(newOptions)
      }
    }
  },
  mounted() {
    this.setupEchart()
  },
  destroyed() {
    hyChart?.dispose()
    hyChart = null
  },
  methods: {
    setupEchart() {
      this.$nextTick(() => {
        if (this.$refs.divRef) {
          hyChart = echarts.init(this.$refs.divRef, null, { renderer: 'svg' })
          hyChart?.setOption(this.options)
          window.addEventListener('resize', () => {
            hyChart?.resize()
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
